<template>
  <div class="danmaku-list">

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/4f74ce5dc1b0bf173f89a9d886fa30c96aecff2e.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-author-name with-colon">RedRockBambi</span><span-->
    <!--          class="danmaku-message">没有，后辈可能比前胸多点起伏</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">感谢&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;赠送&nbsp;</span><span class="danmaku-gift-name">小心心</span><span-->
    <!--          class="danmaku-message">&nbsp;×&nbsp;</span><span class="danmaku-gift-num">1</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">欢迎&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;进入直播间&nbsp;</span></div>-->
    <!--    </div>-->


    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/4f74ce5dc1b0bf173f89a9d886fa30c96aecff2e.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-author-name with-colon">RedRockBambi</span><span-->
    <!--          class="danmaku-message">没有，后辈可能比前胸多点起伏</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">感谢&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;赠送&nbsp;</span><span class="danmaku-gift-name">小心心</span><span-->
    <!--          class="danmaku-message">&nbsp;×&nbsp;</span><span class="danmaku-gift-num">1</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">欢迎&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;进入直播间&nbsp;</span></div>-->
    <!--    </div>-->


    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/4f74ce5dc1b0bf173f89a9d886fa30c96aecff2e.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-author-name with-colon">RedRockBambi</span><span-->
    <!--          class="danmaku-message">没有，后辈可能比前胸多点起伏</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">感谢&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;赠送&nbsp;</span><span class="danmaku-gift-name">小心心</span><span-->
    <!--          class="danmaku-message">&nbsp;×&nbsp;</span><span class="danmaku-gift-num">1</span></div>-->
    <!--    </div>-->

    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-message">欢迎&nbsp;</span><span class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
    <!--          class="danmaku-message">&nbsp;进入直播间&nbsp;</span></div>-->
    <!--    </div>-->


    <!--    <div class="danmaku-item">-->
    <!--      <div class="danmaku-author-face"-->
    <!--           style="background-image: url(http://127.0.0.1:9501/static/4f74ce5dc1b0bf173f89a9d886fa30c96aecff2e.jpg);"></div>-->
    <!--      <div class="danmaku-content"><span class="danmaku-author-name with-colon">RedRockBambi</span><span-->
    <!--          class="danmaku-message">没有，后辈可能比前胸多点起伏</span></div>-->
    <!--    </div>-->


    <Danmaku v-for="(item,index) in showList" :item="item" :key="index"/>

  </div>
</template>

<script>

// eslint-disable-next-line no-unused-vars
const request = require('request')
import Danmaku from "./models/Danmaku";

export default {
  name: "barrage",
  components: {
    Danmaku
  },
  props: {},
  data() {
    return {
      showList: [],
      biliLive: undefined,
      douLive: undefined,
      huLive: undefined,
      msgchat: false,
      vipJoin: false,
      join: false,
      gift: false,

      biliWebsock: undefined,
      douyuWebsock: undefined,
      huyaWebsock: undefined
    };
  },
  watch: {},
  computed: {},
  methods: {
    getRoom() {
      let {biliLive, douLive, huLive, msgchat, vipJoin, join, gift} = this.$route.query
      this.biliLive = biliLive
      this.douLive = douLive
      this.huLive = huLive
      this.msgchat = msgchat ? true : false
      this.vipJoin = vipJoin ? true : false
      this.join = join ? true : false
      this.gift = gift ? true : false
    },
    initBili() {
      let ws_url = `ws://127.0.0.1:9501/bilibili?roomId=${this.biliLive}`
      this.biliWebsock = new WebSocket(ws_url)
      this.biliWebsock.onmessage = this.websocketonmessage
      this.biliWebsock.onclose = this.websocketclose
    },
    initDouYu() {
      let ws_url = `ws://127.0.0.1:9501/douyu?roomId=${this.douLive}`
      this.douyuWebsock = new WebSocket(ws_url)
      this.douyuWebsock.onmessage = this.websocketonmessage
      this.douyuWebsock.onclose = this.websocketclose
    },
    initHuYa() {
      let ws_url = `ws://127.0.0.1:9501/huya?roomId=${this.huLive}`
      this.huyaWebsock = new WebSocket(ws_url)
      this.huyaWebsock.onmessage = this.websocketonmessage
      this.huyaWebsock.onclose = this.websocketclose
    },
    websocketonmessage(e) { //数据接收
      const redata = JSON.parse(e.data);
      // console.log(e.data)
      // console.log(redata)
      // console.log(this)
      if (redata.type == 'vipJoin' && this.vipJoin) {
        new Audio(`http://tts.youdao.com/fanyivoice?word=欢迎舰长${redata.nikeName}进入直播间&le=zh&keyfrom=speaker-target`).play();
      }
      if (redata.type == 'chatMsg' && this.msgchat) {
        new Audio(`http://tts.youdao.com/fanyivoice?word=${redata.nikeName}说${redata.content}&le=zh&keyfrom=speaker-target`).play();
      }
      // if (redata.type == 'chatMsg' && this.msgchat && redata.nikeName != '小煜のChannel') {
      //   new Audio(`http://tts.youdao.com/fanyivoice?word=${redata.nikeName}说${redata.content}&le=zh&keyfrom=speaker-target`).play();
      // }
      // if (redata.type == 'chatMsg' && redata.nikeName == '小煜のChannel' && this.msgchat) {
      //   new Audio(`http://tts.youdao.com/fanyivoice?word=${redata.content}&le=zh&keyfrom=speaker-target`).play();
      // }
      // if (redata.type == 'gift' && redata.giftName != '小心心' && this.gift) {
      if (redata.type == 'gift' && this.gift) {
        new Audio(`http://tts.youdao.com/fanyivoice?word=感谢${redata.nikeName}投喂${redata.count}个${redata.giftName}&le=zh&keyfrom=speaker-target`).play();
      }
      if (redata.type == 'join' && this.join) {
        new Audio(`http://tts.youdao.com/fanyivoice?word=欢迎${redata.nikeName}进入直播间&le=zh&keyfrom=speaker-target`).play();
        return
      }
      if (redata.type == 'vipJoin') {
        new Audio(`http://tts.youdao.com/fanyivoice?word=欢迎舰长${redata.nikeName}进入直播间&le=zh&keyfrom=speaker-target`).play();
      }
      // if (redata.type == 'join' && redata.nikeName != '月灰灰' && this.join) {
      //   new Audio(`http://tts.youdao.com/fanyivoice?word=欢迎${redata.nikeName}进入直播间&le=zh&keyfrom=speaker-target`).play();
      //   return
      // }
      // if (redata.type == 'join' && redata.nikeName == '月灰灰' && this.join) {
      //   new Audio(`http://tts.youdao.com/fanyivoice?word=欢迎${redata.nikeName}妈咪进入直播间&le=zh&keyfrom=speaker-target`).play();
      //   return
      // }
      if (redata.type == 'online') {
        return;
      }
      if (!redata.type) {
        return;
      }

      this.pushData(redata)
    },
    websocketclose(e) {  //关闭
      console.log('断开连接', e);
    },
    pushData(data) {
      if (this.showList.length < 11) {
        this.showList.push(data)
      } else {
        this.showList.shift()
        this.showList.push(data)
      }
      console.log(this.showList)
    }
  },
  destroyed() {
    this.biliWebsock.close() //离开路由之后断开websocket连接
    this.douyuWebsock.close()
    this.huyaWebsock.close()
  },
  created() {
    this.getRoom()
    if (this.biliLive) {
      this.initBili()
    }
    if (this.douLive) {
      this.initDouYu()
    }
    if (this.huLive) {
      this.initHuYa()
    }
  },
  mounted() {

  }
};
</script>

<style lang="less">

.danmaku-list {
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  scroll-behavior: smooth;

  &.hidden {
    visibility: hidden;
  }

  &.absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &-pinned {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
  }

  &-placeholder {
    height: 100%;
  }
}

@keyframes danmakuIn {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.danmaku {
  &-item {
    padding: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    transition: opacity 0.5s;
    user-select: none;
    text-shadow: -2px -2px #000000, -2px -1px #000000, -2px 0 #000000, -2px 1px #000000, -2px 2px #000000,
      -1px -2px #000000, -1px -1px #000000, -1px 0 #000000, -1px 1px #000000, -1px 2px #000000, 0 -2px #000000,
      0 -1px #000000, 0 0 #000000, 0 1px #000000, 0 2px #000000, 1px -2px #000000, 1px -1px #000000, 1px 0 #000000,
    1px 1px #000000, 1px 2px #000000, 2px -2px #000000, 2px -1px #000000, 2px 0 #000000, 2px 1px #000000,
    2px 2px #000000;
    animation: 0.5s danmakuIn;
    opacity: 1;

    &.hidden {
      opacity: 0;
    }
  }

  &-author-face {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    margin-right: 6px;
    display: inline-block;
    flex-shrink: 0;
    background-size: cover;
  }

  &-content {
    overflow: initial;
    align-self: center;
  }

  &-author-name {
    color: #8cd9ff;

    &.with-colon::after {
      content: '：';
      margin-left: 2px;
    }

    // 主播
    &.anchor {
      color: #fff248;
    }

    // 房管
    &.owner {
      color: #ff9800;
    }
  }

  &-message,
  &-gift-num {
    color: #fff;
  }

  &-gift-name {
    color: #eb76ff;
  }

  &-message {
    font-family: 'Imprima', 'Microsoft YaHei';
    font-size: 14px;
    line-height: 14px;
  }

  &-gift-num {
    font-family: 'Imprima', 'Microsoft YaHei';
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
  }

  &-author-name,
  &-gift-name {
    font-family: 'Changa One', 'Microsoft YaHei';
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
  }
}
</style>
